<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellspacing="0" style="margin: auto;">
        <thead>
            <tr>
            <th>序号</th>
            <th>学生ID</th>
            <th>学生姓名</th>
            <th>学生年龄</th>
            <th>学生性别</th>
            <th>学生班级</th>
            <th>学生成绩</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div class="page1"></div>
    
    <script src="./demo.js">
    
    
    </script>
    <script src="./page.js">
    
    
    
    </script>
    <script>
    let page1=new Page('.page1',{
        pageTag:{
            first:'首页',
            prev:'上一页',
            list:null,
            next:'下一页',
            last:'末页'
        },
        pageInfo:{
            pageNum:1,
            pageSize:10,
            totalData:1001,
            totalPage:100
    
        },
        callback(pagenum){
            let pagesize=10
            let startno=(pagenum-1)*pagesize
            let html=''
            for(let i=startno;i<startno+pagesize;i++){
                html+=`
                <tr>  
                <td> </td>
        <td>${tableArr[i].id} </td>
        <td>${tableArr[i].name} </td>
        <td>${tableArr[i].age} </td>
        <td>${tableArr[i].gender} </td>
        <td>${tableArr[i].class} </td>
        <td>${tableArr[i].score} </td>
        </tr>  
                
                `
                document.querySelector('tbody').innerHTML=html
            }
        }
    })
    
    
    
    
    </script>
    <script>
    let page10=document.querySelector('.page1')
    page10.style.margin='20px 350px'
    
    page10.style.width='800px'
    
    
    
    
    
    </script>
    
</body>
</html>


